import React, { useEffect, useRef, useState } from "react";
import { Dimensions, FlatList, Image, ScrollView, StatusBar, StyleSheet, Text, View } from "react-native";
import Colors from "../../util/Colors";
import PlayListTable from "./PlayListTable";
import AllPlayListHeader from "./AllPlayListHeader";
import { Tab, TabView } from "@rneui/themed";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import PlayListItem2Col from "./PlayListItem2Col";
import PlayListItem from "../PlayListItem/PlayListItem";
import AntDesign from "react-native-vector-icons/AntDesign";
import Ionicons from "react-native-vector-icons/Ionicons";
import Toast from "react-native-easy-toast";
import TabTop2Aera from "../TabTop2Aera/TabTop2Aera";
import { get163CatPlayList, get163TopList } from "../../request/neteaseRequest";
import _ from "lodash";


export default function(props){

  let item = props.route.params.item;
  let king = props.route.params.kind;
  const [page,setPage] = useState(1);
  const [more,setMore] = useState(true);
  const [perPage,setPerPage] = useState(20);
  const [lists,setLists] = useState([]);
  const [data, setData] = useState([]);
  let cat = props.route.params.cat;
  if(!cat){
    cat = '全部'
  }
  useEffect(() => {
    if(king === 'ALL_LIST') {
      initAllList();

    }else {
      initRank();
    }
  },[cat])

  async function initRank(){
    await get163TopList((r) => {
        setData(r);
    })
  }

  async function initAllList(){
    await get163CatPlayList(cat,0,perPage,(r) => {
      setLists(r.v);
      setPage(page + 1)
    })
  }
  async function moreList(){
    let offset = perPage * (page - 1);
    await get163CatPlayList(cat,offset,perPage,(r) => {
      setLists(_.concat(lists,r.v));
      if((page+1) * perPage < r.count){
        setMore(true)
      }else {
        setMore(false);
      }
      setPage(page + 1)
    })
  }
  if(king === 'ALL_LIST'){

    const clickBtn = () => {
      props.navigation.navigate('PickerCat',{father:'AllPlayList'})
      //console.log('to');
    }
    //console.log('参数：'+lists);
    //console.log(lists);
    return(

      <View style={styles.main}>
        <AllPlayListHeader cat={cat} onPress={() => props.navigation.pop()} clickButton={clickBtn}/>
        <PlayListTable
          isPlayList={true}
          navigation={props.navigation}
          songs={lists}
          onMore={moreList}
          more={more}
          // navigation={this.props.navigation}
        />

      </View>
    )

  }else if(king === 'RANK'){
    const [index, setIndex] = React.useState(0);

    const _onItemPress = item => {
      //console.log('_onItemPressed: ' + item);
      props.navigation.navigate('ListDetail',{item:{...item,isAlbum:false}});
      //this.toast.show(item.name);
      // this.props.navigation.navigate('PlayListDetail', {playList: item});
    };

    const _renderItem = ({ item }) => (
      <PlayListItem item={item} onPress={_onItemPress} />
    );
    return(

      <View style={styles.main}>
        <View style={styles.item}>
          <AntDesign
            name={'arrowleft'}
            size={24}
            style={styles.icon}
            color={'white'}
            onPress={() => props.navigation.pop()}
          />
          <View style={styles.layoutText}>
            <Text style={styles.itemTitle} numberOfLines={1}>
              排行榜
            </Text>

          </View>
          <View style={styles.icon}>

          </View>
        </View>
        <FlatList
          data={data}
          renderItem={_renderItem}
          numColumns={2}
          keyExtractor={(item, index) => index.toString()}
        />


      </View>
    )
  }






}



const {height, width} = Dimensions.get('window');
const itemPadding = 10;
const styles = StyleSheet.create({
  main:{
    width:width,
    height:height - 55,

  },
  tabView: {
    flex: 1,
    backgroundColor: Colors.pageBg,
    marginTop: StatusBar.currentHeight,
  },
  tabBarText: {
    fontSize: 12,
    marginTop: 8,
    marginBottom: 4,
  },
  tabBarUnderline: {
    backgroundColor: Colors.colorPrimary,
    height: 1,
  },
  item: {
    // backgroundColor:'rgba(35,35,35,0.37)',
    backgroundColor:Colors.colorPrimary,
    height: 50,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  icon: {
    flex: 1,
    padding: 12,
  },
  layoutText: {
    // position:'absolute',
    flex: 4,
    flexDirection: 'column',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems:'center',

    overflow: 'hidden'
  },
  itemTitle: {
    fontSize: 15,
    color: '#ffffff'
  },
  itemSubTitle: {
    fontSize: 13,
    color: '#dddddddd',
    marginTop: 2,
  },
})
